<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/theme-chalk/index.css">
</head>
<body>
	<div id="app">
		<el-row :gutter="10">
			<el-col :span="8">
				<el-cascader
					clearable
					change-on-select
					:options="options"
					:props="props"
					@change="handleItemChange"
					style="width: 100%"
				></el-cascader>
			</el-col>
			<el-col :span="12">
				<el-input placeholder="请输入内容" v-model="keyword" clearable></el-input>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" icon="el-icon-search" @click="handleSearchClick">搜索</el-button>
			</el-col>
		</el-row>
		<el-row :gutter="10">
			<el-col :span="24">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column prop="name" label="名称" ></el-table-column>
					<el-table-column prop="province" label="省份" style="width: 20px"></el-table-column>
					<el-table-column prop="city" label="城市" style="width: 20px"></el-table-column>
					<el-table-column prop="area" label="区县" style="width: 20px"></el-table-column>
					<el-table-column prop="address" label="地址" ></el-table-column>
					<el-table-column prop="location.lat" label="纬度" ></el-table-column>
					<el-table-column prop="location.lng" label="经度" ></el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<el-row :gutter="10">
			<el-col :span="24">		
    			<el-pagination 
    				@size-change="handleSizeChange"
    				@current-change="handleCurrentChange"
    				:current-page="currentPage"
    				:page-sizes="[10, 20, 50]"
    				:page-size="pageSize"
    				layout="total, sizes, prev, pager, next, jumper"
    				:total="total">
    			</el-pagination>
			</el-col>
		</el-row>
	</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			province: '',
			city: '',
			area: '',
			keyword : '',
			currentPage: 1,
			pageSize: 10,
			total: 0,
			tableData: [],
			options : [],
			props: {
				value: 'label',
				children: 'children'
			}
		},
		methods: {
			handleItemChange(val) {
				if(val.length === 1){
					this.province = val[0];
					this.city = '';
					this.area = '';
					
					var province = null;
					var provinceIndex = null;
					
					for(var i = 0; i < this.options.length; i++) {
						var item = this.options[i];
						if(item.label === val[0]) {
							province =  item;
							provinceIndex = i;
							break;
						}
					}
					
					if(null == province || null == provinceIndex) {
						return;
					}
					
					if(!province.children.length) {
						axios.get('/poi/getCities/' + province.label)
						.then(function (response) {
							if(response.status == 200) {
								var options = [];
								response.data.forEach((item, index) => {
									var option = {
										label: item,
										children: []
									};
									options.push(option);
								}); 
								
								vm.$data.options[provinceIndex].children = options;
							}
						})
						.catch(function (error) {
							console.log(error);
						});
					}
				} else if(val.length === 2){
					this.province = val[0];
					this.city = val[1];
					this.area = '';
					
					var province = null;
					var provinceIndex = null;
					
					for(var i = 0; i < this.options.length; i++) {
						var item = this.options[i];
						if(item.label === val[0]) {
							province =  item;
							provinceIndex = i;
							break;
						}
					}
					
					if(null == province || null == provinceIndex) {
						return;
					}
					
					var city = null;
					var cityIndex = null;
					
					for(var i = 0; i < province.children.length; i++) {
						var item = province.children[i];
						if(item.label === val[1]) {
							city =  item;
							cityIndex = i;
							break;
						}
					}
					
					if(null == city || null == cityIndex) {
						return;
					}
					
					if(!city.children.length) {
						axios.get('/poi/getAreas/' + city.label)
						.then(function (response) {
							if(response.status == 200) {
								var options = [];
								response.data.forEach((item, index) => {
									var option = {
										label: item
									};
									options.push(option);
								}); 
								
								vm.$data.options[provinceIndex].children[cityIndex].children = options;
							}
						})
						.catch(function (error) {
							console.log(error);
						});
					}
				} else if(val.length === 3){
					this.province = val[0];
					this.city = val[1];
					this.area = val[2];
				}
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.queryByPage(this.province, this.city, this.area, this.keyword, this.currentPage, val);
			},
			handleCurrentChange(val) {
				this.queryByPage(this.province, this.city, this.area, this.keyword, val, this.pageSize);
			},
			handleSearchClick() {
				this.queryByPage(this.province, this.city, this.area, this.keyword, 1, this.pageSize);
			},
			queryByPage(province, city, area, keyword, pageNum, pageSize) {
				axios.post('/poi/queryByPage', {
					province: province,
					city: city,
					area: area,
					keyword: keyword,
					pageNum: pageNum,
					pageSize: pageSize
				})
				.then(function (response) {
					if(response.status == 200) {
						if(null != response.data) {
							vm.$data.province = province;
							vm.$data.city = city;
							vm.$data.area = area;
							vm.$data.keyword = keyword;
							vm.$data.currentPage = pageNum;
							vm.$data.pageSize = pageSize;
							vm.$data.total = response.data.total;
							vm.$data.tableData = response.data.tableData;
						}
					}
				})
				.catch(function (error) {
					console.log(error);
				});
			}
		},
		created: function () {
			this.queryByPage('', '', '', '', 1, 10);
			
			
			axios.get('/poi/getProvinces')
			.then(function (response) {
				if(response.status == 200) {
					if(response.data != null ){
						var options = [];
						response.data.forEach((item, index) => {
							var option = {
								label: item,
								children: []
							};
							options.push(option);
						}); 
						
						vm.$data.options = options;
					}
				}	 
			})
			.catch(function (error) {
				console.log(error);
			});
		}
	})
</script>
</html>